<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" @scrolltolower="lowerBottom" scroll-y>
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>

					<!-- 订单列表 -->
					<view v-for="(item,index) in tabItem.orderList" :key="index" class="order-item">
						<view class="i-top b-b">
							<view class="time" style="font-size: 24rpx;">
								订单号:{{item.order_sn}}
								<text v-if="item.order_type==1">免费赠送</text>
								<text v-if="item.order_type==3">爱心计划</text>
							</view>
							<text class="state" :style="{color: item.stateTipColor}">{{item.stateTip}}</text>
						</view>
						<view class="goods-box-single" @click="toDetail(item.order_sn)">

							<!-- 	<image class="goods-img" src="/static/img/face.jpg" mode="aspectFill"></image> -->
							<view class="right">
								<view class="title clamp" style="margin-bottom: 10rpx;" v-if="item.good_type==0">
									回收类别:旧衣回收</view>
								<view class="title clamp" style="margin-bottom: 10rpx;" v-if="item.good_type==1">
									回收类别:旧家电回收</view>
								<view class="title clamp" style="margin-bottom: 10rpx;" v-if="item.good_type==2">
									回收类别:旧家具回收</view>
								<view class="title clamp" style="margin-bottom: 10rpx;" v-if="item.good_type==3">
									回收类别:旧空调回收</view>
								<text class="title clamp" v-if="item.true_weight">实际重量：{{item.true_weight}}公斤</text>
								<text class="title clamp" v-else>预估重量：{{item.weight}}公斤</text>

								<text class="attr-box">预约地址：{{item.addr.recycle_address}}{{item.addr.addr}}</text>
								<view class="price">
									<image src="/static/img/icon_time.png" mode="widthFix"></image>
									<text>预约时间：{{item.recycle_time}} </text>
								</view>
							</view>
						</view>

						<view class="action-box b-t">
							<button class="action-btn" @click="toadd(item)">再来一单</button>
							<button class="action-btn recom" @click="toDetail(item.order_sn)">订单详情</button>
							<button class="action-btn recom" @click="toTank(item)"
								v-if="item.state!=5 && item.state!=3 && item.state!=4">取消预约</button>
						</view>
					</view>
					<view class="middle" v-if="showMore">
						{{ loadingType === 0 ? contentText.contentdown : loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore }}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 回收标准弹框 -->
		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHsbz"></view>
		<view class="modal-dialog" v-if="isHsbz">
			<view class="modal-content">
				<image @tap="toclose()" class="close" :src='this.commonImg() + "close.png"'></image>
				<view class="title">取消原因</view>
				<view class="reason">
					<view class="item" v-for="(row, index) in reasonList" :key="index" @tap="toreason(row)">
						<radio style="transform:scale(0.7)" :checked="reason==row.name" color="#4D7CF4" />
						<text>{{row.name}}</text>
					</view>
				</view>
				<view class="save">
					<view class="btn kf" @click="cancelOrder()">
						残忍取消
					</view>
					<view class="btn" @click="tokefu()">
						先联系客服解决问题
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	var _self,
		page = 1,
		timer = null;
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				showMore: false,
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了!'
				},
				is_wxpay: true,
				tabCurrentIndex: 0,
				navList: [{
						status: 0,
						text: '全部',
						orderList: []
					},
					{
						status: 1,
						text: '待取件',
						orderList: []
					},
					{
						status: 2,
						text: '回收中',
						orderList: []
					},
					{
						status: 3,
						text: '已完成',
						orderList: []
					},
					{
						status: 4,
						text: '已取消',
						orderList: []
					}
				],
				serviceClass: '', //服务弹窗css类，控制开关动画
				giveClass: '',
				addressClass: '',
				name: '',
				orderId: '',
				paytype: 'wxpay', //支付类型
				recinfo: '',
				ddanId: '',
				addlength: false,
				isHsbz: false,
				reason: '',
				reasonList: [{
					name: "暂时不回收了"
				}, {
					name: "信息填写有误"
				}, {
					name: "快递员联系不上/未上门"
				}, {
					name: "需要承担运费"
				}, {
					name: "已通过其他渠道处理"
				}, {
					name: "其他原因"
				}],
				cancel_order: ''
			};
		},
		onShow() {},
		onLoad(options) {
			_self = this;
			// #ifdef H5
			this.is_wxpay = false;
			// #endif
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			this.tabCurrentIndex = +options.status;
			// #ifndef MP
			this.loadData()
			// #endif
			// #ifdef MP
			if (options.status == 0) {
				this.loadData()
			}
			// #endif
		},
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
			this.loadData();
		},

		methods: {
			toreason(row) {
				this.reason = row.name
			},
			tokefu() {
				uni.navigateTo({
					url: "/pages/kefu/index"
				})
			},
			toclose() {
				this.isHsbz = false
			},
			toadd(item) {
				if (item.good_type == 0) {
					uni.switchTab({
						url: '/pages/tabBar/order/add'
					});
				} else {
					uni.navigateTo({
						url: '/packagePages/tabBar/appliances/add'
					})
				}

			},
			lowerBottom() {
				this.showMore = true;
				if (this.loadingType !== 0) {
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading(); //显示加载动画

				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.status;
				this.$api.http.get('order-list', {
					state: status,
					page: page
				}).then(res => {
					if (res) {
						page++; //每触底一次 page +1
						this.orderList = res.data.list; //将数据拼接在一起
						let orderList = this.orderList.filter(item => {
							item = Object.assign(item, this.orderStateExp(item.state));
							return item;
						});
						orderList.forEach(item => {
							navItem.orderList.push(item);
						})
						this.loadingType = 0; //将loadingType归0重置
						uni.hideNavigationBarLoading(); //关闭加载动画
						if (res.data.list.length == 0) {
							//没有数据
							this.loadingType = 2;
							console.log(this.loadingType)
							uni.hideNavigationBarLoading(); //关闭加载动画
							return;
						}
					}
				})


			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.status;

				navItem.orderList = [];

				//防止重复加载
				// if (source === 'tabChange' && navItem.loaded === true) {
				// 	return;
				// }
				page = 1;
				this.showMore = true;
				if (this.loadingType !== 0) {
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading(); //显示加载动画
				setTimeout(() => {
					console.log(status)
					this.$api.http.get('order-list', {
						state: status,
						page: 1
					}).then(res => {
						if (res) {
							page++;
							this.orderList = res.data.list;
							let orderList = this.orderList.filter(item => {
								item = Object.assign(item, this.orderStateExp(item.state));
								return item;
							});
							orderList.forEach(item => {
								navItem.orderList.push(item);
							})
							this.loadingType = 0; //将loadingType归0重置
							uni.hideNavigationBarLoading(); //关闭加载动画
							console.log(this.loadingType)
							if (res.data.list.length == 0) {
								//没有数据
								this.loadingType = 2;
								uni.hideNavigationBarLoading(); //关闭加载动画
								return;
							}
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							this.$set(navItem, 'loaded', true);
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
						}
					})

				}, 600);
			},
			tocustom() {
				uni.navigateTo({
					url: '/pages/custom/custom'
				})
			},
			//swiper 切换
			changeTab(e) {
				_self.showMore = false;
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				_self.showMore = false;
				this.tabCurrentIndex = index;
			},
			//删除订单
			deleteOrder(item) {
				this.$api.http.post('order-remove', {
					ids: item.id
				}).then(res => {
					if (res) {
						if (res.code === 0) {
							this.$api.msg(res.msg)
							setTimeout(() => {
								let list = this.navList[this.tabCurrentIndex].orderList;
								let index = list.findIndex(val => val.id === item.id);
								index !== -1 && list.splice(index, 1);
								uni.hideLoading();
							}, 1000)
						}
					}
				})

			},
			//取消订单
			toTank(item) {
				this.cancel_order = item
				this.isHsbz = true
			},
			cancelOrder() {
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(() => {
					let {
						stateTip,
						stateTipColor
					} = this.orderStateExp(5);
					this.cancel_order = Object.assign(this.cancel_order, {
						status: 5,
						stateTip,
						stateTipColor
					})

					if (this.cancel_order.good_type != 0) {
						this.$api.http.post('business-order-cancel', {
							order_sn: this.cancel_order.order_sn,
							cancel_reason: this.reason
						}).then(res => {
							if (res) {
								if (res.code == 1) {
									this.isHsbz = false
									this.$api.msg("取消成功")
									setTimeout(() => {
										let list = this.navList[this.tabCurrentIndex].orderList;
										let index = list.findIndex(val => val.id === this
											.cancel_order
											.id);
										index !== -1 && list.splice(index, 1);
									}, 500)

								}
							}
							uni.hideLoading();
						})
					} else {
						this.$api.http.post('order-cancel', {
							order_sn: this.cancel_order.order_sn,
							reason: this.reason
						}).then(res => {
							if (res) {
								if (res.code == 1) {
									this.isHsbz = false
									this.$api.msg("取消成功")
									setTimeout(() => {
										let list = this.navList[this.tabCurrentIndex].orderList;
										let index = list.findIndex(val => val.id === this
											.cancel_order
											.id);
										index !== -1 && list.splice(index, 1);
									}, 500)

								}
							}
							uni.hideLoading();
						})
					}





				}, 600)
			},
			toAdd(order_sn, goods_id) {
				uni.navigateTo({
					url: '/pages/user/order/evaluate/add?order_sn=' + order_sn + '&goods_id=' + goods_id
				})
			},


			//订单状态文字和颜色
			orderStateExp(status) {
				let stateTip = '',
					stateTipColor = '#3cbdc5';
				switch (+status) {
					case 1:
						stateTip = '待服务';
						break;
					case 2:
						stateTip = '回收中';
						break;
					case 3:
						stateTip = '回收成功';
						break;
					case 4:
						stateTip = '回收失败';
						stateTipColor = '#909399';
						break;
					case 5:
						stateTip = '已取消';
						stateTipColor = '#909399';
						break;
					case 6:
						stateTip = '已完成';
						break;

				}
				return {
					stateTip,
					stateTipColor
				};
			},
			toDetail(order_sn) {
				uni.navigateTo({
					url: '/pages/user/order/detail?order_sn=' + order_sn
				})
			}
		},
	}
</script>

<style lang="scss">
	.middle {
		text-align: center;
		line-height: 80rpx;
		font-size: 26rpx;
	}

	page,
	.content {
		background: #f8f8f8;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #303133;
			position: relative;

			&.current {
				color: #3cbdc5;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #3cbdc5;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin: 16upx 0 0;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: 28upx;
			color: #303133;
			position: relative;

			.time {
				flex: 1;
				font-weight: bold;
				padding-right: 10%;

				text {
					background: #FB6B50;
					border-radius: 3px;
					color: #fff;
					margin-left: 15rpx;
					padding: 3rpx 8rpx;
					font-size: 22rpx;
					font-weight: normal;
				}
			}

			.state {
				color: #3cbdc5;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: 28upx;
				color: #fff;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid #eeeeee;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 150upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 100upx;
				height: 100upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.goods-box.two {
			height: auto;

			.b-t:after {
				border-bottom: 0;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 30upx 0;
			align-items: center;

			.goods-img {
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: 28upx;
					color: #333;
					line-height: 35upx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}

				.attr-box {
					margin: 15rpx 0;
					font-size: 24rpx;
					color: #666;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.price {
					font-size: 24upx;
					color: #333;
					font-weight: bold;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						width: 30rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: 24upx;
			color: #333;
			background: #eeeeee;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: linear-gradient(90deg, #0fD0C3, #3ebcc5);
				color: #fff;

				&:after {
					border-color: #3cbdc5;
				}
			}
		}
	}


	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}

	.uni-load-more__img>view {
		position: absolute
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}

	.load2 {
		transform: rotate(30deg)
	}

	.load3 {
		transform: rotate(60deg)
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s
	}

	.load2 view:nth-child(1) {
		animation-delay: .13s
	}

	.load3 view:nth-child(1) {
		animation-delay: .26s
	}

	.load1 view:nth-child(2) {
		animation-delay: .39s
	}

	.load2 view:nth-child(2) {
		animation-delay: .52s
	}

	.load3 view:nth-child(2) {
		animation-delay: .65s
	}

	.load1 view:nth-child(3) {
		animation-delay: .78s
	}

	.load2 view:nth-child(3) {
		animation-delay: .91s
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}

	/*边框*/
	.b-b:after,
	.b-t:after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		-webkit-transform: scaleY(0.5);
		-ms-transform: scaleY(0.5);
		transform: scaleY(0.5);
		border-bottom: 1px solid #E4E7ED;
	}

	.b-b:after {
		bottom: 0;
	}

	.b-t:after {
		top: 0;
	}

	.pay-list {
		width: 100%;
		border-bottom: solid 1upx #eee;

		.row {
			width: 100%;
			height: 100upx;
			display: flex;
			align-items: center;

			.left {
				width: 80upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;

				image {
					width: 65upx;
					height: 65upx;
				}
			}

			.center {
				width: 100%;
				font-size: 28upx;
			}

			.right {
				width: 100upx;
				flex-shrink: 0;
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.btn {
		width: 100%;
		height: 100upx;

		.button {
			width: 100%;
			height: 80upx;
			border-radius: 40upx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #0fD0C3, #3ebcc5);
			font-size: 28upx;
		}
	}

	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.layer {
			position: fixed;
			z-index: 22;
			bottom: 0;
			width: 92%;
			padding: 0 4%;
			height: 70%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			.content {
				width: 100%;
				padding: 20upx 0;
			}

		}

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		&.service {
			.row {
				margin: 30upx 0;

				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}

				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}

		.input {
			width: 100%;
			padding: 0 0 30rpx;
			align-items: center;
			font-size: 28upx;

			input {
				border: 1rpx solid #eee;
				padding: 15rpx 20rpx;
			}
		}

	}

	.block {
		width: 94%;
		padding: 0 3%;
		z-index: 22;
		position: fixed;
		background: #fff;
		bottom: 0;

		.info {
			width: 100%;
			padding: 60upx 0;
			display: flex;

			.right {
				width: 100%;
			}

			.icon {
				width: 80upx;
				height: 80upx;
				display: flex;
				align-items: center;

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			.tel-name {
				width: 100%;
				display: flex;
				font-size: 30upx;

				.tel {
					margin-left: 40upx;
				}

				.radio {
					display: flex;
					width: 180rpx;
					margin-left: 30rpx;

					.center {
						padding-left: 15rpx;
					}
				}
			}

			.size {
				width: 100%;
				font-size: 24upx;
				align-items: baseline;
				color: #777;
				margin-top: 10rpx;

				view {
					display: block;

					text {
						width: 33.333%;
						float: left;
						font-size: 25rpx;
						line-height: 40rpx;
					}
				}
			}

			.addres {
				width: 100%;
				font-size: 26upx;
				color: #999;
			}
		}

		.title {
			width: 100%;
			font-size: 30upx;
			padding: 20px 0 15px;
		}

		.content {
			.orderinfo {
				width: 100%;

				.row {
					width: 100%;
					height: 90upx;
					display: flex;
					align-items: center;

					.nominal {
						flex-shrink: 0;
						font-size: 30upx;
						color: #7d7d7d;
					}

					.text {
						width: 70%;
						margin-left: 10upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30upx;
					}
				}
			}

			.pay-list {
				width: 100%;

				.row {
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;

					.left {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;

						image {
							width: 80upx;
							height: 80upx;
						}
					}

					.center {
						width: 100%;
						font-size: 28upx;
					}

					.right {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.pay {
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #f06c7a;
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
		}

		.tis {
			margin-top: 10upx;
			width: 100%;
			font-size: 22upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;

			.terms {
				color: #5a9ef7;
			}
		}
	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 72%;
		position: fixed;
		top: 15%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.modal-content {
		line-height: 40rpx;
		padding: 40rpx 30rpx;
		position: relative;

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 30rpx;
			top: 48rpx;
		}

		.reason {
			margin: 30rpx 0 90rpx;

			.item {
				margin-bottom: 15rpx;

				text {
					color: #333;
				}
			}
		}

		.code {
			width: 100%;
		}

		.tishi {
			font-size: 28rpx;
			text-align: center;
		}

		.title {
			display: block;
			font-weight: bold;
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.show {
			width: 300rpx;
			height: 105rpx;
			display: block;
			margin: 50rpx auto 30rpx;
			z-index: 10000;
		}

		view {
			font-size: 26rpx;
			color: #333333;
		}

		p {
			margin-bottom: 10rpx;

			text {
				font-weight: bold;
			}
		}

		button {
			width: 100%;
			height: 75rpx;
			border-radius: 10rpx;
			margin: 36rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background: #4772ed;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 0;
			box-sizing: border-box;
		}

		.save {

			view {
				display: flex;
				margin-bottom: 0;
			}

			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				width: 60%;
				height: 80rpx;
				border-radius: 10rpx;
				background: #4772ed;
				color: #fff;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				border: 1px solid #4772ed;
			}

			.btn.kf {
				background: #fff;
				color: #a6a6a6;
				width: 35%;
				border: 1px solid #eee;
			}
		}
	}
</style>